// CustomNode.js
import logicFlow, { RectNode, RectNodeModel, NodeView, h  } from '@logicflow/core'

class CustomNodeModel extends RectNodeModel {
  // 自定义节点模型
  initNodeData(data) {
    // console.log('initNodeData', data)
    super.initNodeData(data)
    this.draggable = true; // 必须设置为 true
    this.width = 120
    this.height = 60
    this.text = {
      value: data.text.value || '自定义节点',
      label: data.text.label || '自定义节点',
      id: data.text.id,

      x: data.x,
      y: data.y
    },
    this.id = data.id || `custom_node_${Date.now()}`

  }
  getDefaultAnchor() {
    console.log("this.x", this.x)
    return [
      {
        x: this.x,
        y: this.y - this.height / 2,
        id: `${this.id}_top`,
        type: "input"
      },
      {
        x: this.x + this.width / 2,
        y: this.y,
        id: `${this.id}_right`,
        type: "output"
      },
      {
        x: this.y + this.height / 2,
        id: `${this.id}_bottom`,
        type: "output"
      },
      {
        x: this.x - this.width / 2,
        y: this.y,
        id: `${this.id}_left`,
        type: "input"
      }
    ];
  }

  updateAnchorPosition() {
    this.initNodeData(this.getData());
    // this.anchors = this.getDefaultAnchor();
  }

}

class CustomNodeView extends RectNode  {
  // 自定义节点视图（可选）
  getShape() {
    const { model } = this.props;
    const { x, y, width, height, radius } = model;
    const style = model.getNodeStyle();
    
    return h("g", {}, [
      h("rect", {
        ...style,
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height
      }),
      h("circle", {
        ...style,
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height
      }),
      h("text", {
        class: "lf-node-text",
        x,
        y,
        "text-anchor": "middle",
        "dominant-baseline": "middle",
        style: "font-size: 14px;"
      }, model.text?.value || ""),
      // 绘制锚点
      ...this.drawAnchors()
    ]);
  }

  drawAnchors() {
    const { model } = this.props;
    return model.anchors.map(anchor => {
      return h("rect", {
        cx: anchor.x,
        cy: anchor.y,
        r: 5,
        fill: anchor.type === "input" ? "#FF6A00" : "#5F95FF",
        stroke: "#FFF",
        "stroke-width": 2,
        class: "lf-node-anchor",
        "data-anchor-id": anchor.id
      });
      
    });
  }

}

// 自定义节点视图
// class CustomNodeView extends NodeView {
//     getShape() {
//       const { model } = this.props;
//       const { x, y, width, height, radius } = model;
//       const style = model.getNodeStyle();
      
//       return h("g", {}, [
//         h("rect", {
//           ...style,
//           x: x - width / 2,
//           y: y - height / 2,
//           rx: radius,
//           ry: radius,
//           width,
//           height
//         }),
//         h("text", {
//           class: "lf-node-text",
//           x,
//           y,
//           "text-anchor": "middle",
//           "dominant-baseline": "middle",
//           style: "font-size: 14px;"
//         }, model.text?.value || ""),
//         // 绘制锚点
//         ...this.drawAnchors()
//       ]);
//     }
  
//     drawAnchors() {
//       const { model } = this.props;
//       return model.anchors.map(anchor => {
//         return h("circle", {
//           cx: anchor.x,
//           cy: anchor.y,
//           r: 5,
//           fill: anchor.type === "input" ? "#FF6A00" : "#5F95FF",
//           stroke: "#FFF",
//           "stroke-width": 2,
//           class: "lf-node-anchor",
//           "data-anchor-id": anchor.id
//         });
//       });
//     }
//   }

export default {
  type: 'custom-node',
  view: CustomNodeView,
  model: CustomNodeModel
}